<template>
    <div class="guide-page">
        <!-- 顶部导航 -->
        <div class="guide-header">
            <div class="header-content">
                <h1>旅游攻略</h1>
                <p>发现全球旅行灵感，获取实用旅行指南</p>
            </div>
        </div>

        <!-- 目的地搜索 -->
        <div class="destination-search">
            <div class="search-container">
                <div class="search-input">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索目的地..." v-model="searchQuery" @keyup.enter="searchGuides" />
                </div>
                <button class="search-btn" @click="searchGuides">搜索</button>
            </div>
            <div class="popular-destinations">
                <span v-for="dest in popularDestinations" :key="dest" @click="searchByDestination(dest)">
                    {{ dest }}
                </span>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="category-nav">
            <div v-for="category in categories" :key="category.id" :class="{ active: activeCategory === category.id }"
                @click="activeCategory = category.id">
                <i :class="category.icon"></i>
                <span>{{ category.name }}</span>
            </div>
        </div>

        <!-- 攻略内容区 -->
        <div class="guide-content">
            <!-- 精选攻略 -->
            <div class="featured-guides">
                <h2 class="section-title">精选攻略</h2>
                <div class="guides-grid">
                    <div v-for="guide in featuredGuides" :key="guide.id" class="guide-card">
                        <div class="guide-image" :style="{ backgroundImage: `url(${guide.image})` }">
                            <div class="guide-badge" v-if="guide.badge">{{ guide.badge }}</div>
                        </div>
                        <div class="guide-info">
                            <h3>{{ guide.title }}</h3>
                            <div class="guide-meta">
                                <span><i class="far fa-eye"></i> {{ guide.views }}</span>
                                <span><i class="far fa-heart"></i> {{ guide.likes }}</span>
                                <span><i class="far fa-clock"></i> {{ guide.duration }}</span>
                            </div>
                            <p class="guide-excerpt">{{ guide.excerpt }}</p>
                            <div class="guide-author">
                                <img :src="guide.author.avatar" :alt="guide.author.name" />
                                <span>{{ guide.author.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分类攻略 -->
            <div class="category-guides">
                <h2 class="section-title">{{ getCategoryName(activeCategory) }}攻略</h2>
                <div class="guides-list">
                    <div v-for="guide in filteredGuides" :key="guide.id" class="guide-item">
                        <div class="guide-image" :style="{ backgroundImage: `url(${guide.image})` }"></div>
                        <div class="guide-details">
                            <h3>{{ guide.title }}</h3>
                            <div class="guide-meta">
                                <span><i class="fas fa-map-marker-alt"></i> {{ guide.location }}</span>
                                <span><i class="far fa-calendar-alt"></i> {{ guide.date }}</span>
                                <span><i class="far fa-user"></i> {{ guide.author.name }}</span>
                            </div>
                            <p class="guide-excerpt">{{ guide.excerpt }}</p>
                            <div class="guide-tags">
                                <span v-for="tag in guide.tags" :key="tag">{{ tag }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实用信息 -->
            <div class="practical-info">
                <h2 class="section-title">实用旅行信息</h2>
                <div class="info-cards">
                    <div class="info-card">
                        <div class="card-icon">
                            <i class="fas fa-passport"></i>
                        </div>
                        <h3>签证指南</h3>
                        <p>全球热门目的地签证要求、办理流程和注意事项</p>
                        <router-link to="/visa-guide">查看详情 <i class="fas fa-arrow-right"></i></router-link>
                    </div>
                    <div class="info-card">
                        <div class="card-icon">
                            <i class="fas fa-yen-sign"></i>
                        </div>
                        <h3>预算规划</h3>
                        <p>如何合理规划旅行预算，省钱技巧和消费指南</p>
                        <router-link to="/budget-guide">查看详情 <i class="fas fa-arrow-right"></i></router-link>
                    </div>
                    <div class="info-card">
                        <div class="card-icon">
                            <i class="fas fa-utensils"></i>
                        </div>
                        <h3>美食指南</h3>
                        <p>各地特色美食推荐、餐厅选择和饮食注意事项</p>
                        <router-link to="/food-guide">查看详情 <i class="fas fa-arrow-right"></i></router-link>
                    </div>
                    <div class="info-card">
                        <div class="card-icon">
                            <i class="fas fa-subway"></i>
                        </div>
                        <h3>交通指南</h3>
                        <p>目的地交通方式、购票技巧和出行建议</p>
                        <router-link to="/transport-guide">查看详情 <i class="fas fa-arrow-right"></i></router-link>
                    </div>
                </div>
            </div>

            <!-- 热门问答 -->
            <div class="faq-section">
                <h2 class="section-title">热门问答</h2>
                <div class="faq-list">
                    <div v-for="faq in popularFAQs" :key="faq.id" class="faq-item">
                        <div class="faq-question" @click="toggleFAQ(faq.id)">
                            <h3>{{ faq.question }}</h3>
                            <i :class="['fas', faq.expanded ? 'fa-minus' : 'fa-plus']"></i>
                        </div>
                        <div class="faq-answer" v-if="faq.expanded">
                            <p>{{ faq.answer }}</p>
                            <div class="faq-meta">
                                <span><i class="far fa-thumbs-up"></i> {{ faq.likes }} 人觉得有用</span>
                                <span><i class="far fa-comment"></i> {{ faq.comments }} 条评论</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="view-more-btn">查看更多问答</button>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref, computed } from 'vue';

    export default {
        name: 'GuidePage',
        setup() {
            // 搜索相关
            const searchQuery = ref('');
            const popularDestinations = ref([
                '日本', '泰国', '巴厘岛', '欧洲', '马尔代夫', '新加坡', '澳大利亚', '美国'
            ]);

            const searchGuides = () => {
                console.log('搜索攻略:', searchQuery.value);
                // 这里可以添加搜索逻辑
            };

            const searchByDestination = (dest) => {
                searchQuery.value = dest;
                searchGuides();
            };

            // 分类导航
            const categories = ref([
                { id: 'all', name: '全部', icon: 'fas fa-globe-asia' },
                { id: 'planning', name: '行程规划', icon: 'fas fa-route' },
                { id: 'food', name: '美食', icon: 'fas fa-utensils' },
                { id: 'accommodation', name: '住宿', icon: 'fas fa-hotel' },
                { id: 'transport', name: '交通', icon: 'fas fa-subway' },
                { id: 'attractions', name: '景点', icon: 'fas fa-camera' },
                { id: 'tips', name: '实用贴士', icon: 'fas fa-lightbulb' }
            ]);

            const activeCategory = ref('all');

            const getCategoryName = (id) => {
                const category = categories.value.find(c => c.id === id);
                return category ? category.name : '';
            };

            // 精选攻略
            const featuredGuides = ref([
                {
                    id: 1,
                    title: '日本关西7日深度游全攻略',
                    image: 'https://images.unsplash.com/photo-1492571350019-22de08371fd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '从京都的古寺到奈良的小鹿，从大阪的美食到神户的夜景，这份攻略带你玩转关西地区...',
                    views: 12456,
                    likes: 2345,
                    duration: '7天6晚',
                    badge: '编辑推荐',
                    author: {
                        name: '日本旅行达人',
                        avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
                    }
                },
                {
                    id: 2,
                    title: '泰国清迈自由行完全手册',
                    image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '清迈这座泰北玫瑰，有着独特的文化氛围和慢节奏生活，这份攻略告诉你如何像当地人一样玩...',
                    views: 9876,
                    likes: 1876,
                    duration: '5天4晚',
                    badge: '热门',
                    author: {
                        name: '东南亚旅行家',
                        avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
                    }
                },
                {
                    id: 3,
                    title: '巴厘岛浪漫蜜月旅行指南',
                    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '从奢华酒店到隐秘海滩，从日落晚餐到SPA体验，打造完美蜜月回忆的终极指南...',
                    views: 7654,
                    likes: 1543,
                    duration: '6天5晚',
                    badge: '最新',
                    author: {
                        name: '蜜月策划师',
                        avatar: 'https://randomuser.me/api/portraits/women/65.jpg'
                    }
                }
            ]);

            // 全部攻略
            const allGuides = ref([
                {
                    id: 1,
                    title: '京都赏枫5日行程规划',
                    image: 'https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '每年11月是京都赏枫的最佳时节，这份行程规划包含了最佳赏枫地点、人少时段和交通方式...',
                    location: '日本京都',
                    date: '2023-11-15',
                    views: 8765,
                    likes: 1234,
                    category: 'planning',
                    tags: ['赏枫', '秋季', '行程规划'],
                    author: {
                        name: '日本旅行达人',
                        avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
                    }
                },
                {
                    id: 2,
                    title: '曼谷街头美食地图',
                    image: 'https://images.unsplash.com/photo-1550583720-4fb31ffc0d23?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '从米其林街头小吃到本地人最爱的隐藏美食，这份地图带你吃遍曼谷最地道的美味...',
                    location: '泰国曼谷',
                    date: '2023-09-22',
                    views: 6543,
                    likes: 987,
                    category: 'food',
                    tags: ['美食', '街头小吃', '米其林'],
                    author: {
                        name: '美食探索者',
                        avatar: 'https://randomuser.me/api/portraits/men/22.jpg'
                    }
                },
                {
                    id: 3,
                    title: '东京迪士尼乐园攻略',
                    image: 'https://images.unsplash.com/photo-1545566238-6a541cfafc43?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '如何避开人流高峰、快速通行证使用技巧、必玩项目推荐和最佳拍照点，这份攻略全都有...',
                    location: '日本东京',
                    date: '2023-08-15',
                    views: 5432,
                    likes: 876,
                    category: 'attractions',
                    tags: ['迪士尼', '主题公园', '亲子游'],
                    author: {
                        name: '乐园玩家',
                        avatar: 'https://randomuser.me/api/portraits/women/33.jpg'
                    }
                },
                {
                    id: 4,
                    title: '巴黎地铁完全指南',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '巴黎地铁系统看似复杂，其实掌握这些技巧就能轻松出行，包括购票方式、换乘建议和安全提示...',
                    location: '法国巴黎',
                    date: '2023-07-30',
                    views: 4321,
                    likes: 654,
                    category: 'transport',
                    tags: ['地铁', '交通', '省钱'],
                    author: {
                        name: '欧洲通',
                        avatar: 'https://randomuser.me/api/portraits/men/45.jpg'
                    }
                },
                {
                    id: 5,
                    title: '巴厘岛乌布精品酒店推荐',
                    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '乌布是巴厘岛的文化中心，这些隐藏在丛林中的精品酒店将带给你独特的住宿体验...',
                    location: '印尼巴厘岛',
                    date: '2023-06-18',
                    views: 3210,
                    likes: 543,
                    category: 'accommodation',
                    tags: ['酒店', '精品', '丛林'],
                    author: {
                        name: '酒店达人',
                        avatar: 'https://randomuser.me/api/portraits/women/55.jpg'
                    }
                },
                {
                    id: 6,
                    title: '旅行摄影必备技巧',
                    image: 'https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    excerpt: '从器材选择到构图技巧，从光线把握到后期处理，这些技巧让你的旅行照片更出彩...',
                    location: '通用',
                    date: '2023-05-05',
                    views: 2109,
                    likes: 432,
                    category: 'tips',
                    tags: ['摄影', '技巧', '器材'],
                    author: {
                        name: '旅行摄影师',
                        avatar: 'https://randomuser.me/api/portraits/men/66.jpg'
                    }
                }
            ]);

            // 过滤攻略
            const filteredGuides = computed(() => {
                if (activeCategory.value === 'all') {
                    return allGuides.value;
                }
                return allGuides.value.filter(guide => guide.category === activeCategory.value);
            });

            // 热门问答
            const popularFAQs = ref([
                {
                    id: 1,
                    question: '日本旅游最佳季节是什么时候？',
                    answer: '日本四季各有特色：春季(3-5月)适合赏樱，夏季(6-8月)可以参加花火大会和登山，秋季(9-11月)是赏枫的好时节，冬季(12-2月)适合滑雪和温泉。根据你的兴趣选择最佳时间。',
                    likes: 156,
                    comments: 32,
                    expanded: false
                },
                {
                    id: 2,
                    question: '去泰国需要准备多少现金？',
                    answer: '泰国很多地方可以使用信用卡，但建议每人每天准备2000-3000泰铢现金(约400-600人民币)，用于小吃、小费、夜市购物等。入境时可能会抽查每人携带20000泰铢或等值外币。',
                    likes: 98,
                    comments: 24,
                    expanded: false
                },
                {
                    id: 3,
                    question: '欧洲申根签证哪个国家最容易通过？',
                    answer: '通常申请停留时间最长的国家签证。如果停留时间相同，法国、意大利等大国通过率较高。但最重要的是材料真实完整，行程合理，有足够的经济能力证明。',
                    likes: 76,
                    comments: 18,
                    expanded: false
                },
                {
                    id: 4,
                    question: '巴厘岛有哪些必去的景点？',
                    answer: '必去景点包括：乌布皇宫和猴子森林、海神庙、金巴兰海滩日落、圣泉寺、德格拉朗梯田等。如果时间充裕，还可以去蓝梦岛潜水或阿贡火山徒步。',
                    likes: 112,
                    comments: 29,
                    expanded: false
                }
            ]);

            const toggleFAQ = (id) => {
                const faq = popularFAQs.value.find(f => f.id === id);
                if (faq) {
                    faq.expanded = !faq.expanded;
                }
            };

            return {
                searchQuery,
                popularDestinations,
                searchGuides,
                searchByDestination,
                categories,
                activeCategory,
                getCategoryName,
                featuredGuides,
                filteredGuides,
                popularFAQs,
                toggleFAQ
            };
        }
    };
</script>

<style scoped>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }

    .guide-page {
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
    }

    /* 顶部导航 */
    .guide-header {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
            url('https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        padding: 0 20px;
    }

    .header-content h1 {
        font-size: 36px;
        margin-bottom: 15px;
    }

    .header-content p {
        font-size: 18px;
        opacity: 0.9;
    }

    /* 目的地搜索 */
    .destination-search {
        background-color: #fff;
        padding: 30px 40px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }

    .search-container {
        display: flex;
        margin-bottom: 15px;
    }

    .search-input {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        padding: 0 15px;
        border-radius: 30px 0 0 30px;
    }

    .search-input i {
        color: #777;
        margin-right: 10px;
    }

    .search-input input {
        flex: 1;
        height: 50px;
        border: none;
        background: transparent;
        outline: none;
        font-size: 16px;
    }

    .search-btn {
        width: 120px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 0 30px 30px 0;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .search-btn:hover {
        background-color: #3d8b40;
    }

    .popular-destinations {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .popular-destinations span {
        background-color: #f0f9f0;
        color: #4CAF50;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .popular-destinations span:hover {
        background-color: #4CAF50;
        color: white;
    }

    /* 分类导航 */
    .category-nav {
        display: flex;
        overflow-x: auto;
        padding: 0 40px 20px;
        gap: 15px;
    }

    .category-nav>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 80px;
        padding: 10px 5px;
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 3px solid transparent;
    }

    .category-nav>div i {
        font-size: 24px;
        margin-bottom: 8px;
        color: #777;
    }

    .category-nav>div span {
        font-size: 14px;
        color: #666;
    }

    .category-nav>div.active {
        border-bottom-color: #4CAF50;
    }

    .category-nav>div.active i,
    .category-nav>div.active span {
        color: #4CAF50;
    }

    /* 内容区通用样式 */
    .guide-content {
        padding: 0 40px 40px;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 25px;
        color: #333;
        position: relative;
        padding-left: 15px;
    }

    .section-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 4px;
        background-color: #4CAF50;
        border-radius: 2px;
    }

    /* 精选攻略 */
    .guides-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 25px;
        margin-bottom: 40px;
    }

    .guide-card {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .guide-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .guide-image {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .guide-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: #ff5722;
        color: white;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }

    .guide-info {
        padding: 20px;
    }

    .guide-info h3 {
        font-size: 18px;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .guide-meta {
        display: flex;
        gap: 15px;
        font-size: 13px;
        color: #777;
        margin-bottom: 15px;
    }

    .guide-meta i {
        margin-right: 5px;
    }

    .guide-excerpt {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .guide-author {
        display: flex;
        align-items: center;
    }

    .guide-author img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .guide-author span {
        font-size: 14px;
        color: #666;
    }

    /* 分类攻略 */
    .guides-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .guide-item {
        display: flex;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .guide-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .guide-item .guide-image {
        width: 250px;
        height: 180px;
        flex-shrink: 0;
    }

    .guide-details {
        flex: 1;
        padding: 20px;
    }

    .guide-details h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .guide-details .guide-meta {
        display: flex;
        gap: 15px;
        font-size: 13px;
        color: #777;
        margin-bottom: 10px;
    }

    .guide-details .guide-meta i {
        margin-right: 5px;
        color: #4CAF50;
    }

    .guide-details .guide-excerpt {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .guide-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .guide-tags span {
        background-color: #f0f9f0;
        color: #4CAF50;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
    }

    /* 实用信息 */
    .practical-info {
        margin-bottom: 40px;
    }

    .info-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .info-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .card-icon {
        width: 50px;
        height: 50px;
        background-color: #f0f9f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        color: #4CAF50;
        font-size: 20px;
    }

    .info-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .info-card p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .info-card a {
        color: #4CAF50;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .info-card a i {
        margin-left: 5px;
        font-size: 12px;
    }

    /* 热门问答 */
    .faq-section {
        margin-bottom: 40px;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .faq-item {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .faq-question {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .faq-question h3 {
        font-size: 16px;
        font-weight: 500;
    }

    .faq-question i {
        color: #4CAF50;
        transition: transform 0.3s;
    }

    .faq-answer {
        padding: 0 20px 20px;
        border-top: 1px solid #eee;
    }

    .faq-answer p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .faq-meta {
        display: flex;
        gap: 15px;
        font-size: 13px;
        color: #999;
    }

    .faq-meta i {
        margin-right: 5px;
    }

    .view-more-btn {
        display: block;
        width: 200px;
        margin: 0 auto;
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .view-more-btn:hover {
        background-color: #3d8b40;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .guides-grid {
            grid-template-columns: 1fr 1fr;
        }

        .guide-item {
            flex-direction: column;
        }

        .guide-item .guide-image {
            width: 100%;
            height: 150px;
        }
    }

    @media (max-width: 768px) {
        .guide-header {
            height: 250px;
        }

        .header-content h1 {
            font-size: 28px;
        }

        .header-content p {
            font-size: 16px;
        }

        .destination-search,
        .guide-content {
            padding-left: 20px;
            padding-right: 20px;
        }

        .search-container {
            flex-direction: column;
        }

        .search-input {
            border-radius: 30px;
            margin-bottom: 10px;
        }

        .search-btn {
            width: 100%;
            border-radius: 30px;
        }

        .guides-grid {
            grid-template-columns: 1fr;
        }

        .category-nav {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    @media (max-width: 480px) {
        .guide-header {
            height: 200px;
        }

        .header-content h1 {
            font-size: 24px;
        }

        .info-cards {
            grid-template-columns: 1fr;
        }

        .section-title {
            font-size: 20px;
        }
    }
</style>